<template>
  <div class="box-card">
    <div class="EchartPractice">
      <div id="main"></div>
    </div>
    <Dialog
      :unitList="unitList"
      :dialogTableVisible.sync="dialogTableVisible"
      :title="title"
      @openDetail="openDetail"
    />
    <Detail
      :detailVisible.sync="detailVisible"
      :detailList="detailList"
      @detailInfo="detailInfo"
    />
    <ProjectDetail
      :projectVisible.sync="projectVisible"
      :currentDetail="currentDetail"
    />
  </div>
</template>

<script>
import {
  getQualified,
  getQualiunitType,
  getQualiunitscoreList,
} from "@/api/unit/random";
import { getSomeUnitList } from "@/api/unit/unit";
import { getScoreindexListByUnitID } from "@/api/unit/extract";
import Dialog from "./components/Dialog.vue";
import Detail from "./components/Detail.vue";
import ProjectDetail from "./components/ProjectDetail.vue";

export default {
  components: {
    Dialog,
    Detail,
    ProjectDetail,
  },
  data() {
    return {
      //合格单位数组
      unitArr1: [],
      //不合格单位数组
      unitArr2: [],
      unitInfo: null,
      unitList: [],
      dialogTableVisible: false,
      title: "",
      detailVisible: false,
      projectVisible: false,
      detailList: [],
      currentDetail: null,
    };
  },
  name: "EchartPractice",
  methods: {
    //合格与不合格单位
    drawChart(xValue) {
      let myEchart = this.$echarts.init(document.getElementById("main"));
      myEchart.on("click", (params) => {
        const flag = params.seriesName;
        const index = params.dataIndex;
        let unitType_id = this.unitInfo[index].unitType_id;
        getQualiunitType({
          unitType: unitType_id,
        }).then((res) => {
          this.unitList = res.data;
          this.dialogTableVisible = true;
        });

        // let idStr;
        // if (flag === "合格") {
        //   idStr = this.unitInfo[index].qualifiedUnitIds;
        //   this.title = "合格单位";
        // } else {
        //   idStr = this.unitInfo[index].disqualificationUnitIds;
        //   this.title = "不合格单位";
        // }
        // const ids = idStr.split(",");
        // ids.forEach((item, index) => {
        //   ids[index] = parseInt(item);
        // });
        // getSomeUnitList({ unitIds: ids }).then((res) => {
        //   this.unitList = res.rows;
        //   this.dialogTableVisible = true;
        // });
      });
      //配置项
      let option = {
        title: {
          text: "被评价单位中扣分单位统计",
        },
        tooltip: {},
        legend: {
          data: [],
        },
        xAxis: {
          type: "category",
          data: xValue,
          axisLabel: {
            interval: 0,
            rotate: -30,
          },
        },
        yAxis: {
          type: "value",
          minInterval: 1,
        },
        series: [
          {
            name: "数量",
            type: "bar",
            data: this.unitArr1,
            // barWidth: "100%", //
          },
          //   {
          //     name: "不合格",
          //     type: "bar",
          //     data: this.unitArr2,
          //     barWidth: "100%", //
          //   },
        ],
      };
      myEchart.setOption(option);
    },
    theQualified() {
      var that = this;
      getQualified().then((response) => {
        let num = response.data.length;
        that.unitInfo = response.data;
        console.log(response.data);
        var newunitArr1 = [];
        var newunitArr2 = [];
        const xAxis = [];
        for (var i = 0; i < response.data.length; i++) {
          newunitArr1.push(response.data[i].num);
          //   newunitArr2.push(response.data[i].unitId);
          xAxis.push(response.data[i].typeName);
        }
        that.unitArr1 = newunitArr1;
        that.unitArr2 = newunitArr2;
        this.drawChart(xAxis);
      });
    },
    openDetail(row) {
      getQualiunitscoreList({
        unitId: row,
      }).then((res) => {
        this.detailList = res.data;
        this.detailVisible = true;
      });
      //   getScoreindexListByUnitID({ unitId: row.unitId }).then((res) => {
      //     res.rows.forEach((item) => (item.operate = null));
      //     this.detailList = res.rows;
      //     this.detailVisible = true;
      //   });
    },
    detailInfo(row) {
      this.currentDetail = row;
      this.projectVisible = true;
    },
  },
  mounted() {
    this.theQualified();
  },
};
</script>

<style lang="scss" scoped>
#main {
  //   width: 700px;
  height: 100%;
  //   margin: auto;
  //   margin-top: 150px;
  width: 100%;
}
.EchartPractice {
  height: calc(100vh - 84px);
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}
</style>
